<template>
  <a-card style="padding-bottom: 100px">
    <a-form-model
      ref="ruleForm"
      :model="form"
      :rules="rules"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
    >
      <a-form-model-item label="标题" prop="title">
        <a-input v-model="form.title" />
      </a-form-model-item>
      <a-form-model-item label="作者" prop="author">
        <a-input v-model="form.author" :maxlength=7 />
      </a-form-model-item>
      <a-form-model-item label="所属类型" prop="classType">
        <a-select v-model="form.classType">
          <a-select-option v-for="(item,index) in typeList" :key="index" :value="item.id">{{
            item.name
          }}</a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="图片" prop="imageUrl">
        <a-upload
          name="file"
          :action="$baseUrl + '/rapid/common/upload/uploadImage'"
          :headers="headers"
          @change="handleChange"
        >
          <a-button :disabled="form.imageUrl ? true : false">
            <a-icon type="upload" /> 上传
          </a-button>
        </a-upload>
      </a-form-model-item>
    </a-form-model>
    <quill-editor
      v-model="form.content"
      ref="myQuillEditor"
      :options="editorOption"
      @blur="onEditorBlur($event)"
      @focus="onEditorFocus($event)"
      @change="onEditorChange($event)"
      style="height: 300px"
    >
    </quill-editor>
    <div class="buttons" style="margin-top:80px;">
      <a-button type="primary" @click="handleok">确定</a-button>
    </div>
  </a-card>
</template>

<script>
export default {
  data() {
    return {
      content: null,
      editorOption: {},
      labelCol: { span: 3 },
      wrapperCol: { span: 10 },
      form: {
        title: "", //标题
        author: "", //作者
        classType: "",
        content: "",
        imageUrl:""
      },
      //url: $baseUrl + "/rapid/common/upload/uploadImage",
      rules: {
        title: [{ required: true, message: "请输入标题", trigger: "blur" }],
        author: [
          { required: true, message: "请输入作者名称", trigger: "blur" },
        ],
        classType: [
          { required: true, message: "请选择类型名称", trigger: "change" },
        ],
        imageUrl:[
          { required: true, message: "请上传图片", trigger: "blur" },
        ]
      },
      typeList: [],
      headers: {
        authorization: "authorization-text",
      },
    };
  },
  created() {
    //获取类型名称
    this.getTypeList();
    if(this.$route.query.id){
        this.getDetail()
    }
  },
  methods: {
    getDetail(){
         let params = { id:this.$route.query.id };console.log(111)
         this.$http("/rapid/news/getNew", params).then((res) => {
            if(res.code == '200'){
                this.form = res.result;
            }
         })
    },
    getTypeList() {
      let params = {
        pageVo: {
          pageNumber: 1,
          pageSize: 100,
        },
      };
      this.$http("/rapid/newsType/getPage", params).then((res) => {
        if (res.code == "200") {
          res.result.records.forEach((item) => {
            let obj = {};
            obj.id = item.id;
            obj.name = item.nameType;
            this.typeList.push(obj);
          });
        }
      });
    },
    onEditorBlur() {
      //失去焦点事件
    },
    onEditorFocus() {
      //获得焦点事件
    },
    onEditorChange() {
      //内容改变事件
    },
    handleok() {
      let _this = this;
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          _this.$http("/rapid/news/saveOrUpdate", _this.form)
            .then((res) => {
              if (res.code === 200) {
                _this.$message.success("操作成功");
                this.$router.push('/news/newsList')
              } else {
                _this.$message.error(res.message);
              }
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
     //上传文件
    handleChange(info) {
      console.log(info);
      this.fileList = [];
      if (info.file.response) {
        if (info.file.status == "removed") {
          this.form.imageUrl = "";
        } else {
          this.form.imageUrl = info.file.response.result.path;
        }
        console.log(this.form);
      }
    },
  },
};
</script>

<style>
</style>
